<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<!--0. 先引入vue.js-->
		<script src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
	可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
	v-on:click 可以简写为 @click
	如果处理函数不需要传参，()可省略
-->
		<div id="app">
			<button @click="change(-1)">-</button>
			<span>{{n}}</span>
			<button @click="change(+1)">+</button>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						n: 0,
					}
				},
				methods: {
					//本例中，因为页面上只需要一个change函数，所以methods中只添加一个change函数
					//但是页面上调用change()函数时，传入了一个参数值,所以定义change函数时需要
					//定义一个形参来接住实参值
					change(i) {
						//如果i==+1,说明本次想+1
						if (i === 1) {
							this.n++;
						} else {
							//否则如果i!=+1，说明本次想-1
							//只有n>0时，才能-1
							if (this.n > 0) {
								this.n--;
							}
						}
					},
				},
			}).mount("#app");
		</script>
	</body>

</html>